<template>

 
  <el-row :gutter="12">
     <div class="tableall">
      <el-table
    :data="tableData"
    border
    style="width: 400px">
    <el-table-column
      prop="date"
      label="日期"
          align='center'
      width="200">
    </el-table-column>
    <el-table-column
      prop="allIncom"
      label="总收入"
          align='center'
      width="100">
                          <template slot-scope="scope">  
                        <span style="color:#00d053">+ {{ allIncome }}</span>
                    </template>
    </el-table-column>
    <el-table-column
      prop="allExpend"
      label="总支出"
          align='center'
       width="99">
           <template slot-scope="scope">  
                        <span style="color:#f56767">- {{ allExpend }}</span>
                    </template>
    </el-table-column>
  </el-table>


   </div>
  <el-row >
    <el-col :span="6">
          <div id = "pie"
             style="width: 500px;height: 600px;">
          </div>
    </el-col>
    <el-col :span="6" :offset="9">
        <div id = "main"
             style="width: 450px;height: 500px;float: right">
        </div>
    </el-col>
    </el-row>
    
  <!-- <template>
   <div class="analysisTask">             
       <ChartLine ref="chart_line_one"/>              
   </div>
</template> -->
  </el-row>



</template>

<script>
import ChartLine from '../components/chartLint.vue'

export default {
  name: '',
  data() {
    return {
      tableData: [],
      allExpend: '',
      allIncome: '',

      // line: [
      //   {
      //     name: '张雪',
      //     xData: ['2020-02', '2020-03', '2020-04', '2020-05'],
      //     yData: [30, 132, 80, 134],
      //     typea: 'line',
      //   },
      // ],
    }
  },
  components: {
    ChartLine,
  },
  created() {
    // this.getTime()
    this.getAll()
  },

  methods: {
    getRentalBikeInfo() {
      let mainDom = document.getElementById('main')
      let chart = this.$echarts.init(mainDom) //初始化dom
      this.$axios.get('/api/profiles/alltype').then((res) => {
        console.log(res.data[0]._id)
        console.log('000000', res.data[0].tpyeIncome || res.data[0].typeExpend)

        let typeall = []
        for (let i = 0; i < res.data.length; i++) {
          if (res.data[i]._id == '支出') {
            typeall[0] = res.data[i].tpyeIncome || res.data[i].typeExpend
          }
          if (res.data[i]._id == '转账') {
            typeall[1] = res.data[i].tpyeIncome || res.data[i].typeExpend
          }
          if (res.data[i]._id == '充值') {
            typeall[2] = res.data[i].tpyeIncome || res.data[i].typeExpend
          }
          if (res.data[i]._id == '提现') {
            typeall[3] = res.data[i].tpyeIncome || res.data[i].typeExpend
          }

          // console.log(res.data[i].tpyeIncome || res.data[i].typeExpend)
          // typeall[i] = res.data[i].tpyeIncome || res.data[i].typeExpend
        }
        // console.log(typeall)
        chart.setOption({
          title: {
            text: '收支类型榜',
            subtext: 'List of income and expenditure types',
            left: 'center',
          },
          xAxis: {
            type: 'category',
            data: ['支出', '转账', '充值', '提现'],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: typeall,
              type: 'bar',
            },
          ],
        })
      })
    },

    getBikeTypeCountInfo() {
      let container = document.getElementById('pie')
      let chartDom = this.$echarts.init(container) //初始化dom
      //自适应窗口大小
      container.style.width = window.innerWidth * 0.95 + 'px'
      container.style.height = window.innerHeight * 0.91 + 'px'

      this.$axios.get('/api/profiles/all').then((res) => {
        this.allExpend = res.data.allExpend
        this.allIncome = res.data.allIncome
        // console.log(res.data)

        chartDom.setOption({
          //对dom结点进行设置

          title: {
            text: '收支占比',
            subtext: 'Balance of payments ',
            left: 'center',
          },
          tooltip: {
            trigger: 'item',
          },
          legend: {
            orient: 'vertical',
            left: 'left',
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '60%',
              data: [
                { value: res.data.allExpend, name: '总支出' },
                { value: res.data.allIncome, name: '总收入' },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
          ],
        })
      })
    },

    // getTime() {
    //   var aData = new Date()
    //   this.value = aData.getFullYear() + '-' + (aData.getMonth() + 1) + '-' + aData.getDate()
    //   return this.value
    // },

    getAll() {
      this.$axios('/api/profiles/all').then((res) => {
        // this.tableData = res.data[0]
        // this.tableData.push(res.data[0])
        this.tableData.push(res.data)

        console.log(this.tableData)
      })
    },
  },
  //调用
  mounted() {
    // this.drawPie('main')
    this.getBikeTypeCountInfo()
    this.getRentalBikeInfo()
    // const { name, xData, yData, typea } = data.line
    // console.log(this.line)
    // console.log(this.$refs.chart_line_one)
    // this.$refs.chart_line_one.initChart(name, xData, yData, typea)
  },
}
</script>
<style scoped>
.tableall {
  margin: 30px 400px;
}
#pie {
  margin: 0 50px;
}
..rightContainer[data-v-23543608] {
  overflow-x: hidden !important;
  background-color: yellow;
}
</style>